<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用 props 数据验证</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
    </div>
</body>

<script type="text/javascript">
    // 注册组件
    // 当 props 需要验证时，就需要对象写法
    // 当 prop　验证失败时，在开发版本下会在控制台抛出一条警告。
    Vue.component('my-component', {
        props: {
            // 必须时数字类型
            propA: Number,
            // 必须是字符串或数字类型
            probB: [String, Number],
            //  布尔值，如果没有定义，默认值 true
            propC:{
                type: Boolean,
                default: true
            },
            // 数字 且 必需
            propD:{
                type: Number,
                required: true
            },
            // 如果是数组或对象，默认值必须是一个函数的返回值
            propE:{
                type: Array,
                default: function(){
                    return [];
                }
            },
            // 自定义一个验证函数
            propF: {
                validator: function(value){
                    return value > 10;
                }
            }
        }
    });

</script>

</html>